<template>
	<scroll-view scroll-y="true">
		<view class="pageAll">
			<view>
				<view class="avatar" hover-class="avatarHover" @click="changeAspect">
					<view class="left">
						<view class="leftImg" @click.stop="previewImage([avatarIcon])">
							<image :src="avatarIcon" mode="aspectFill"></image>
						</view>
						<view class="leftTitle">
							<text>
								头像
							</text>
						</view>
					</view>
					<view class="right">
						<image :src="arrowIcon" mode="aspectFill" class="rightImg"></image>
					</view>
				</view>
			</view>
			<view>
				<view @click="toPage(item.id, item.text)" hover-class="cardHover" class="card" v-for="(item,index) in cardList"
				 :key="index">
					<selfInfoCard :title="item.title" :text="item.text" :iconVisible="item.iconVisible" />
				</view>
			</view>
			<view>
				<view class="card" v-for="(item,index) in imgList" :key="index">
					<imgCard :title="item.title" :imgPath="item.imgPath" />
				</view>
			</view>
			<myToast :toastVisible="toastVisible" :tipMess="tipMess" />
		</view>
	</scroll-view>
</template>

<script>
	import selfInfoCard from "../../../components/message/selfInfoCard.vue"
	import imgCard from '../../../components/message/imgCard.vue'
	import myToast from '../../../components/message/myToast.vue'
	import {
		uploadFile
	} from '../../../utils/alioss.js'
	import { previewImage } from '@/utils/tools.js'
	export default {
		data() {
			return {
				tipMess: '', // 弹窗文字
				toastVisible: false,
				avatarIcon: require('../../../static/report/foodReport.png'),
				arrowIcon: require('../../../static/message/rightArrow.png'),
				identity: 2, // 1 is user,2 is company
				cardListCom: [{
						title: '昵称',
						text: '--',
						iconVisible: 1, // 右边是否有箭头
						id: 1
					},
					{
						title: '账号',
						text: '--',
						iconVisible: 1,
						id: 2
					},
					{
						title: '登录密码',
						text: '',
						iconVisible: 1,
						id: 3
					},
					{
						title: '文件确认密码',
						text: '',
						iconVisible: 1,
						id: 4
					},
					{
						title: '负责人名称',
						text: '--',
						iconVisible: 0,
						id: 5
					},
					{
						title: '公司名称',
						text: '--',
						iconVisible: 0,
						id: 6
					},
					{
						title: '社会统一信用代码',
						text: '--',
						iconVisible: 0,
						id: 7
					},
				],
				imgListCom: [{
					title: '营业执照',
					imgPath: require('../../../static/report/foodReport.png')
				}, ],
				cardListUser: [{
						title: '昵称',
						text: '--',
						iconVisible: 1,
						id: 1
					},
					{
						title: '账号',
						text: '--',
						iconVisible: 1,
						id: 2
					},
					{
						title: '登录密码',
						text: '',
						iconVisible: 1,
						id: 3
					},
					{
						title: '文件确认密码',
						text: '',
						iconVisible: 1,
						id: 4,
					},
					{
						title: '身份证号码',
						text: '--',
						iconVisible: 0,
						id: 5,
					},
				],
				imgListUser: [{
						title: '手持身份证正面',
						imgPath: require('../../../static/report/foodReport.png')
					},
					{
						title: '手持身份证反面',
						imgPath: require('../../../static/report/foodReport.png')
					}
				],
				cardList: [],
				imgList: [],
			}
		},
		methods: {
			// 预览图片
			previewImage,
			toPage(value, text) {
				if (value === 1) {
					uni.navigateTo({
						url: '../resetName/resetName?name=' + text
					})
				}
				if (value === 2) {
					uni.navigateTo({
						url: '../editTel/editTel?tel=' + text
					})
				}
				if (value === 3) {
					uni.navigateTo({
						url: '../editPwd/editPwd?tel=' + this.cardList[1].text
					})
				}
				if (value === 4) {
					uni.navigateTo({
						url: '../editFilePwdVer/editFilePwdVer?tel=' + this.cardList[1].text
					})
				}
			},
			// 修改头像
			changeAspect() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: data => {
						uploadFile(data.tempFilePaths[0])
							.then(res => {
								if (res.status) {
									this.$api.updateAvatar({
										avatar: res.data.url
									}).then(subRes => {
										if (subRes.status) {
											this.$api.getUserMessage({})
												.then(subResUser => {
													if (subResUser.status) {
														uni.showToast({
															title: '修改头像成功',
															duration: 1000,
														})
														this.avatarIcon = subResUser.data.avatar
														this.$store.commit('setUserInfo', subResUser.data)
													} else {
														uni.showToast({
															title: res.msg,
															icon: 'none',
															duration: 1500,
														})
													}
												})
										} else {
											uni.showToast({
												title: res.msg,
												icon: 'none',
												duration: 1500,
											})
										}
									})
								}
							})

					}
				});

			},
			chooseUserType() {
				const userInfo = this.$store.getters.getUserInfo
				this.avatarIcon = userInfo.avatar
				if (userInfo.type === 'user') {
					uni.setNavigationBarTitle({
						title: '个人信息'
					})
					this.$set(this.cardListUser[0], 'text', userInfo.username)
					this.$set(this.cardListUser[1], 'text', userInfo.phone)
					this.$set(this.cardListUser[4], 'text', userInfo.card)
					this.cardList = JSON.parse(JSON.stringify(this.cardListUser))
					this.$set(this.imgListUser[0], 'imgPath', userInfo.card_front_photo)
					this.$set(this.imgListUser[1], 'imgPath', userInfo.card_reverse_phone)
					this.imgList = JSON.parse(JSON.stringify(this.imgListUser))
				} else {
					uni.setNavigationBarTitle({
						title: '企业信息'
					})
					this.$set(this.cardListCom[0], 'text', userInfo.username)
					this.$set(this.cardListCom[1], 'text', userInfo.phone)
					this.$set(this.cardListCom[4], 'text', userInfo.name)
					this.$set(this.cardListCom[5], 'text', userInfo.company)
					this.$set(this.cardListCom[6], 'text', userInfo.code)
					this.cardList = JSON.parse(JSON.stringify(this.cardListCom))
					this.$set(this.imgListCom[0], 'imgPath', userInfo.license)
					this.imgList = JSON.parse(JSON.stringify(this.imgListCom))
				}
			}
		},
		components: {
			selfInfoCard,
			imgCard,
			myToast,
		},
		onShow() {
			this.chooseUserType()
		},
		onLoad() {},
		onShareAppMessage: (options) => {
			// 设置菜单中的转发按钮触发转发事件时的转发内容
			var shareObj = {
				title: "红标HONBIAO", // 默认是小程序的名称(可以写slogan等)
				path: '/pages/indexPage/authorization/authorization', // 默认是当前页面，必须是以‘/’开头的完整路径
				imageUrl: '/static/index/labelRouge.png', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
				success: (res) => {
					// 转发成功之后的回调
					if (res.errMsg == 'shareAppMessage:ok') {}
				},
				fail: () => {
					// 转发失败之后的回调
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						// 用户取消转发
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				}
			};
			return shareObj
		},
	}
</script>

<style scoped>
	.pageAll {
		box-sizing: border-box;
		background-color: #fdf5f3;
		width: 100%;
		height: 100%;
		padding: 17upx;
		display: inline-block;
	}

	.avatar {
		padding: 17upx;
		border-radius: 10upx;
		background-color: #FFF;
		box-shadow: 0 0 30upx -15upx #400808;
		display: flex;
		height: 133.33upx;
		margin-bottom: 17upx;
	}

	.avatarHover {
		background-color: #f2e6e6 !important;
	}

	.left {
		width: 50%;
		float: left;
		display: flex;
		justify-content: flex-start;
		flex-wrap: nowrap;
		margin: auto 0;
	}

	.leftImg {
		display: flex;
	}

	.leftImg image {
		height: 97.33upx;
		width: 97.33upx;
		margin: auto 0;
	}

	.leftTitle {
		font-size: 32upx;
		color: #333333;
		font-weight: 300;
		padding-left: 25upx;
		display: flex;
	}

	.leftTitle text {
		margin: auto 0;
	}

	.right {
		width: 50%;
		float: right;
		display: flex;
		justify-content: flex-end;
		flex-wrap: nowrap;
		margin: auto 0;
	}

	.rightText {
		width: 32upx;
		height: 32upx;
		background-color: #f7533e;
		color: #ffffff;
		font-size: 24upx;
		border-radius: 50%;
		text-align: center;
		margin-right: 25upx;
	}

	.rightImg {
		height: 25.33upx;
		width: 19.33upx;
		margin: auto 0;
	}

	.card {
		margin-bottom: 17upx;
	}
</style>
